import './index.less'
import {timer} from '@/utils'

function LeaseItem(props) {
  const renderStatus = (val) => {
    if (val == 1) {
      return <div className='status yellow'>未生效</div>
    } else if (val == 3) {
      return <div className='status red'>已过期</div>
    } else if (val == 2) {
      return <div className='status green'>生效中</div>
    }
  }

  return (
    <div className='appointment-item' onClick={() => {
      props.handleClick(props?.data?.id)
    }}>
      <div className='left'>
        <div className='info'>
          <span className='label'>开始时间：</span>
          <span className='value'>{timer(props?.data?.startTime, 'no')}</span>
        </div>
        <div className='info'>
          <span className='label'>结束时间：</span>
          <span className='value'>{timer(props?.data?.endTime, 'no')}</span>
        </div>
        <div className='info'>
          <span className='label'>房屋标题：</span>
          <span className='value'>{props?.data?.house?.name}</span>
        </div>
        <div className='info'>
          <span className='label'>房东名：</span>
          <span className='value'>{props?.data?.house?.Owner?.nickName}</span>
        </div>
        <div className='info'>
          <span className='label'>发起时间：</span>
          <span className='value'>{timer(props?.data?.createdAt)}</span>
        </div>
      </div>
      {renderStatus(props?.data?.status)}
    </div>
  )
}

export default LeaseItem
